<template>
  <div class="common-page-container">
    <a-card :bordered="false" class="common-content-card">
      <!-- 搜索区域 -->
      <SearchForm 
        :query-params="queryParams" 
        @search="handleSearch"
        @reset="handleReset"
        class="common-search-form"
      />
      
      <!-- 操作按钮区域 -->
      <TableOperations 
        :selected-count="selectedRowKeys.length"
        :has-selected="hasSelected"
        @add="handleAdd"
        @batch-delete="handleBatchDelete"
        @refresh="handleRefresh"
        class="common-table-operations"
      />

      <!-- 表格区域 -->
      <RoleTable
        :columns="columns"
        :data="roleList"
        :loading="loading"
        :pagination="pagination"
        :selected-row-keys="selectedRowKeys"
        @selection-change="onSelectChange"
        @table-change="handleTableChange"
        @edit="(record) => handleEdit(record.id)"
        @delete="(record) => handleDelete(record.id)"
        @permission="(record) => handleAssignPermissions(record.id)"
        @status-change="handleStatusChange"
      />
      
      <!-- 加载出错或无数据时显示重试按钮 -->
      <Empty
        :loading="loading"
        :load-error="loadError"
        :error-message="errorMessage"
        :data-list="roleList"
        empty-text-key="role.emptyData"
        @retry="handleRefresh"
      />
    </a-card>

    <!-- 角色表单弹窗 -->
    <RoleFormModal
      ref="roleFormRef"
      :open="modalVisible"
      @update:open="(val) => roleStore.formModalVisible = val"
      :form="form"
      :form-mode="formMode"
      :title="formMode === 'add' ? $t('role.add') : $t('role.edit')"
      :loading="submitLoading"
      @submit="handleSubmit"
      class="common-modal-form"
    />
    
    <!-- 权限分配弹窗 -->
    <PermissionModal
      :open="permissionModalVisible"
      @update:open="(val) => roleStore.permissionModalVisible = val"
      :permission-tree="treeData"
      :model-value="checkedKeys"
      @update:model-value="handlePermissionCheck"
      :default-expanded-keys="defaultExpandedKeys"
      :loading="permissionLoading"
      @submit="handleSubmitPermissions"
      class="common-modal-form"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import useRoleManagement from './hooks/useRoleManagement'
import { useTableColumns } from './config/tableColumns'
import { useRoleStore } from '@/stores/system/role'
import SearchForm from './components/SearchForm.vue'
import TableOperations from './components/TableOperations.vue'
import RoleTable from './components/RoleTable.vue'
import RoleFormModal from './components/RoleFormModal.vue'
import PermissionModal from './components/PermissionModal.vue'

// 组件名称
defineOptions({
  name: 'RoleManagement'
})

// 引用
const roleFormRef = ref<InstanceType<typeof RoleFormModal> | null>(null)

// 获取角色管理Store
const roleStore = useRoleStore()

// 使用角色管理钩子
const {
  // 状态
  loading,
  submitLoading,
  permissionLoading,
  modalVisible,
  permissionModalVisible,
  roleList,
  selectedRowKeys,
  pagination,
  queryParams,
  form,
  treeData,
  checkedKeys,
  defaultExpandedKeys,
  formRef,
  hasSelected,
  loadError,
  errorMessage,
  
  // 表格交互方法
  onSelectChange,
  handleTableChange,
  
  // 搜索区域方法
  handleSearch,
  handleReset,
  
  // 表单操作方法
  handleAdd,
  handleEdit,
  handleSubmit,
  
  // 删除操作方法
  handleDelete,
  handleBatchDelete,
  
  // 状态管理方法
  handleStatusChange,
  
  // 权限相关方法
  handleAssignPermissions,
  handleSubmitPermissions,
  handlePermissionCheck,
  
  // 数据获取方法
  fetchRoleList
} = useRoleManagement()

// 刷新列表
const handleRefresh = () => {
  fetchRoleList()
}

// 获取表单模式
const formMode = ref<'add' | 'edit'>('add')
onMounted(() => {
  // 从store中获取表单模式
  roleStore.$subscribe((mutation, state) => {
    if (state.currentRoleId) {
      formMode.value = 'edit'
    } else {
      formMode.value = 'add'
    }
  })
  
  // 更新formRef
  if (roleFormRef.value) {
    formRef.value = roleFormRef.value.formRef
  }
})

// 表格列配置
const columns = useTableColumns()
</script>

<style lang="scss" scoped>
@import '@/assets/styles/views/common.scss';
</style> 